<template>
  <div :id="id" class="border-box relative" :style="{ width: width, height: height }" v-on="$listeners">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize.js'
import { fontSizeResize } from '@/utils/detection'
export default {
  mixins: [resize,],
  props: {
    id: {
      type: String,
      default: 'pay-type-pie'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    barData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    barData: {
      deep: true,
      handler(val) {
        this.initChart(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // 释放图表实例
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose()
      }
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.getOptions())
    },
    getOptions() {
      var legendData1 = []
      var legendData2 = []
      for (var i = 0; i < this.barData.length; i++) {
        var halfLength = Math.ceil(this.barData.length / 2)
        var itemName = this.barData[i]
        if (i < halfLength) {
          legendData1.push(itemName)
        } else {
          legendData2.push(itemName)
        }
      }
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
          }
        },
        legend: [{
          icon: 'circle',
          type: 'scroll',
          orient: 'vertical',
          left: '20%',
          align: 'left',
          bottom: '0',
          itemGap: 10,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: fontSizeResize(0.12),
            color: '#222222',
            fontFamily: 'AlibabaPuHuiTi'
          },
          data: legendData1
        },
        {
          icon: 'circle',
          type: 'scroll',
          orient: 'vertical',
          left: '56%',
          align: 'left',
          bottom: '0',
          itemWidth: 8,
          itemGap: 10,
          itemHeight: 8,
          textStyle: {
            fontSize: fontSizeResize(0.12),
            color: '#222222',
            fontFamily: 'AlibabaPuHuiTi'
          },
          data: legendData2
        },],
        series: [{
          name: '支付方式占比',
          type: 'pie',
          center: ['50%',
            '38%',],
          radius: ['40%',
            '66%',],
          color: ['#40E8FF',
            '#F7AD4F',
            '#3680FF',
            '#2EC3AA',
            '#6BDCFF',
            '#F86E74',],
          data: this.barData,

          label: { // 饼图图形上的文本标签
            normal: {
              show: true,
              position: 'inner', // 标签的位置
              textStyle: {
                fontWeight: 400,
                fontSize: fontSizeResize(0.12),
                color: '#fff',
                fontFamily: 'AlibabaPuHuiTi'
              },
              formatter: '{d}%'
            }
          }
        },]

      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

